<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>教育缴费</title>
    <link rel="stylesheet" href="./static/css/web.css"/>
    <link rel="stylesheet" href="./static/css/payment.css">
    <link rel="stylesheet" href="./static/bootstrap/css/bootstrap.css">
</head>
<body style="background: #e7e8eb;">
<div id="app" v-cloak>
    <div class="mainHeaderBox">
        <div class="mainHeaderBoxContent">
            <div class="mainHeaderBoxContentLog" @click="toPage('../main.html')">
                <!--<img src="../img/logo.png">
                <span>仁众智慧餐饮云平台</span>-->
                <img src="https://www.yqsh.cn/img/logo.png" id="show_logo">
                <span id="show_name">微信体验学校</span>
            </div>
            <div class="mainHeaderBoxContentMenus">
                <!--
                    作者：303740339@qq.com
                    时间：2019-02-13
                    描述：<div class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive">
                -->
                <a class="mainHeaderBoxContentMenu" href="../contacts.html">
                    通讯录
                </a>
                <a class="mainHeaderBoxContentMenu mainHeaderBoxContentMenuActive" href="../workbench.html">
                    工作台
                </a>
                <a class="mainHeaderBoxContentMenu" href="../incrementService.html">
                    增值服务
                </a>
                <a class="mainHeaderBoxContentMenu" href="../html/dataCenter/index.html">
                    消费数据
                </a>
                <a class="mainHeaderBoxContentMenu" href="../consum.html">
                    数据总览
                </a>
                <a class="mainHeaderBoxContentMenu" href="../setting.html">
                    设置
                </a>
            </div>
            <div class="exit" onclick="logout()">
                退出
            </div>
        </div>
    </div>
    <div class="mainContentBox w1200 auto-height">
        <div class="contact-home-box">
            <div class="left-panel">
                <ul class="main-menu-nav" style="margin: 20px 0;">
                    <li class="menu-two" :class="{'hover':item.url && item.url=='payment-type.html'}"
                        v-for="item in menus">
                        <a :href="item.url"><span>{{item.title}}</span></a>
                    </li>
                </ul>
            </div>
            <div class="right-panel">
                <div style="margin: 20px;min-height:550px;">
                    <div class="header-title dline">
                        <h3>缴费人员名单</h3>
                        <p>可以通过此功能查询或管理缴费人员名单</p>

                    </div>
                    <ul class="nav nav-tabs" style="margin:20px 0px;">
                        <li class="nav-item">
                            <a class="nav-link" :class="{'active':tab==1}" @click="tab=1"
                               href="javascript:void(0)">人员名单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" :class="{'active':tab==2}" @click="tab=2" href="javascript:void(0)">导入人员名单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" :class="{'active':tab==3}" @click="tab=3" href="javascript:void(0)">
                                添加人员</a>
                        </li>
                    </ul>
                    <div v-if="tab==1">
                        <div style="margin:20px 0;">
                            <div style="width:400px;display: inline-block;margin-bottom: 10px;">
                                <div class="input-group">
                                    <input v-model="params.searchKey" type="text" class="form-control"
                                           placeholder="请输入学生姓名，身份证，学号关键字">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-secondary" type="button" @click="loadData(1)">
                                            查询
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <table class="m-table hf8">
                                <thead>
                                <tr>
                                    <th style="width: 100px;">姓名</th>
                                    <th style="width: 150px;">身份证号</th>
                                    <th>学号</th>
                                    <th>项目名称</th>
                                    <th>缴费金额</th>
                                    <th>已付金额</th>
                                    <th>支付状态</th>
                                    <th>商户</th>
                                    <th>支付方式</th>
                                    <th style="width: 220px;">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in pageData.list">
                                    <td>
                                        <div>{{item.studentName}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.studentIdcard}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.studentNumber}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.itemName}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.itemAmount}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.paidAmount}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.payStatusName}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.merchantName}}</div>
                                    </td>
                                    <td>
                                        <div>{{item.payway}}</div>
                                    </td>
                                    <td>
                                        <div>
                                            <a href="javascript:void(0)" @click="reviseAmount(item.id,item.itemName)">修改金额</a>
                                            &nbsp;
                                            <a href="javascript:void(0)" @click="reviseStatus(item.id,item.itemName)">
                                                修改状态</a>
                                            &nbsp;
                                            <a href="javascript:void(0)" @click="deleteItem(item.id)">删除</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr v-if="pageData.list && pageData.list.length == 0">
                                    <td colspan="7" class="empty-tip">
                                        没有相关项目
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div style="float: right;" v-if="pageData.list && pageData.list.length > 0">
                            <nav aria-label="...">
                                <ul class="pagination">
                                    <li class="page-item" :class="{'disabled':pageData.hasPreviousPage==false}">
                                        <a class="page-link" href="javascript:void(0)">上一页</a>
                                    </li>
                                    <li class="page-item" :class="{'active':item==pageData.pageNum}"
                                        v-for="item in pageData.navigatepageNums">
                                        <a class="page-link" href="javascript:void(0)"
                                           @click="loadData(item)">{{item}}</a>
                                    </li>
                                    <li class="page-item" :class="{'disabled':pageData.hasNextPage==false}">
                                        <a class="page-link" href="javascript:void(0)">下一页</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    <div v-if="tab==2" style="display: flex; flex-direction: row;margin:20px 10px;">
                        <div style="flex: 1 1 0%;">
                            <div class="grant-input-box">
                                <div><span>模板文件：</span>
                                    <div class="upload-file-box"><span>{{file?"文件名："+file.name+',共'+list.length+'条记录':'请选择批量补助表格文件'}}</span>
                                        <input type="file" @change='selectExcel'>
                                    </div>
                                    <div style="color: rgb(153, 153, 153);">请下载缴费人员数据模板，填写好补助信息上传表格</div>
                                </div>
                                <div>
                                    <button class="m-btn m-btn-primary m-btn-xs" @click="submitData">提交人员名单</button>
                                </div>
                            </div>
                        </div>
                        <div style="margin: 0px 100px 20px; width: 220px;"><h3
                                style="font-size: 16px; margin-bottom: 20px; color: rgb(85, 85, 85);">缴费人员模板：</h3> <img
                                src="./static/image/bg-import.png" style="width: 100%;">
                            <p style="color: rgb(153, 153, 153); margin-bottom: 10px;">
                                下载缴费人员模板，请标题栏填写缴费人员的信息。
                            </p>
                            <div><a href="./static/atta/缴费名单导入模板.xlsx" target="_blank"
                                    class="m-btn m-btn-primary-border m-btn-xs">下载模板</a></div>
                        </div>
                    </div>
                    <div v-if="tab==3">
                        <div style="margin: 20px;min-height:550px;">
                            <div class="header-title dline">
                                <h3>添加人员</h3>
                                <p>对所在项目添加一个缴费人员</p>
                            </div>
                            <div style="margin:30px 0;">
                                <form id="stuForm">
                                    <div class="form-group">
                                        <label>姓名：</label>
                                        <input type="text" placeholder="请输入姓名" v-model="stu.studentName"
                                               class="form-control"
                                               style="width:400px;">
                                    </div>
                                    <div class="form-group">
                                        <label>学号：</label>
                                        <input type="text" placeholder="请输入学号" v-model="stu.studentNumber"
                                               class="form-control"
                                               style="width:400px;">
                                    </div>
                                    <div class="form-group">
                                        <label>身份证号：</label>
                                        <input type="text" placeholder="请输入身份证号" v-model="stu.studentIdcard"
                                               class="form-control"
                                               style="width:400px;">
                                    </div>

                                    <div style="margin:30px 0;">
                                        <button type="button" class="btn btn-primary" @click="addStu">提交</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footerBox">
        <div class="footerBoxContent">
            Copyright Notice：@2020 YQSH. All Rights Reserved | ICP：蜀ICP备19024447号-1
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript" src="./static/js/vue.min.js"></script>
<script type="text/javascript" src="./static/js/vue-resource.min.js"></script>
<script type="text/javascript" src="./static/js/utils.js"></script>
<script type="text/javascript" src="./static/js/jquery.js"></script>
<script type="text/javascript" src="./static/js/layer/layer.js"></script>
<script type="text/javascript" src="./static/js/sheetjs/xlsx.core.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {tab: 1, pageData: {}, list: null, file: null, searchKey: null, itemList: [], params: {}, stu: {}},
        methods: {
            selectExcel: function (e, a, b, c) {
                let _this = this;
                let reader = new FileReader();

                reader.onload = function (x) {
                    var workbook = XLSX.read(x.target.result, {type: 'binary'});

                    var tempdata = [];
                    var json = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])

                    for (var i = 0; i < json.length; i++) {
                        var item = json[i];

                        tempdata.push({
                            studentName: item["学生姓名"],
                            studentIdcard: item["身份证号"],
                            studentNumber: item["学号"]
                        })
                    }

                    _this.list = tempdata;
                    _this.file = e.target.files[0];
                };

                reader.readAsBinaryString(e.target.files[0]);
            },
            submitData: function () {
                let _this = this;
                let itemid = getQueryParam("id");

                if (!itemid) {
                    showMessage('参数错误');
                    return;
                }

                if (_this.list == null) {
                    showMessage('请选择要导入的文件');
                    return;
                }

                if (_this.list.length == 0) {
                    showMessage('导入文件没有任何的记录');
                    return;
                }

                postWithData("/paydetail/addDetails/" + itemid, this.list, function (result) {
                    if (result.flag) {
                        showMessage("添加人员名单成功.");

                        setTimeout(function () {
                            history.back();
                        }, 1000)
                    } else {
                        showMessage("操作失败：" + result.msg)
                    }
                })
            },
            deleteItem: function (id) {
                let _this = this;

                layer.confirm('确定要删除该条记录吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    postWithData("/paydetail/delete", [id], function (result) {
                        layer.msg('删除成功.', {icon: 1});
                        _this.loadData();
                    })
                });


            },
            loadData: function (page) {
                let _this = this;

                post("/paydetail/list/" + (page || 1) + "/20", _this.params, function (result) {
                    _this.pageData = result.data;
                })
            },
            getItemList: function () {
                let _this = this;

                post("/common/itemList", function (result) {
                    _this.itemList = result.data;
                })
            },
            addStu: function () {
                let _this = this;
                let itemid = getQueryParam("id");
                postWithData("/paydetail/addDetailByStu/" + itemid, _this.stu, function (result) {
                    if (result.flag) {
                        showMessage("添加人员成功.");
                        location.reload();

                    } else {
                        showMessage("操作失败：" + result.msg)
                    }
                })
            },
            reviseAmount: function (id,itemName) {
                layer.open({
                    type: 2,
                    area: ['400px', '450px'],
                    fixed: false, //不固定
                    content: './payment-revise-amount.html?id='+id+'&itemName='+itemName,
                    title:'修改金额'
                });
            },
            reviseStatus: function (id,itemName) {
                layer.open({
                    type: 2,
                    area: ['400px', '450px'],
                    fixed: false, //不固定
                    content: './payment-revise-status.html?id='+id+'&itemName='+itemName,
                    title:'修改支付状态'
                });
            },

        },
        mounted: function () {
            this.loadData();
            this.getItemList();
        }
    });
</script>